<!-- 讨论详情页面 -->
<template>
	<view class="container">
		<!-- 引入讨论组件 -->
		<discussionItem :showFooter="false"></discussionItem>
		<!--评论-->
		<view class="u-p-l-26 u-p-r-26 u-p-t-22" style="padding-bottom: 150rpx">
			<view class="u-flex flex-between">
				<view class="title u-font-32 font-b">评论</view>
				<view class="sort u-flex flex-center" @click="show = true">
					<view class="u-font-24 u-m-r-4">{{ currentSort.label }}</view>
					<view>
						<text class="u-font-24" style="color: #C0C0C0;margin-right: 10rpx;">默认排序</text>
						<u-icon :name="require('../../static/icon/forum/sort.png')" size="20"></u-icon>
					</view>
				</view>
			</view>
			<!-- 评论内容 -->
			<view style="padding: 20rpx 30rpx;" @click="toReply">
				<Comment ></Comment>
			</view>
		</view>
		
		<!--发表评论-->
		  <view class="u-p-l-30 u-p-r-30 fixed-bottom u-flex u-col-center u-border-top "  style="z-index: 99999;">
		    <view class="input u-flex u-col-center" @click="toPublish">
		      <u-icon name="edit-pen-fill" class="u-m-l-32 u-m-r-24"
		              color="rgba(4, 4, 4, .3)" size="40"></u-icon>
		      <view class="placeholder" style="color: rgba(4, 4, 4, .3)">分享您的看法</view>
		    </view>
		    <view class="flex-1 u-flex u-m-b-20" style="justify-content: flex-end">
		      <button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn" open-type="share" type="primary">
		        <view class="u-flex flex-center">
		          <u-icon name='https://app.zbzedu.com/static/WaChat/icon/share.png' color="#888" size="36" class="u-m-r-10"></u-icon>
		          <span>分享</span>
		        </view>
		      </button>
		      <view class="u-p-20 u-flex flex-center" @click="like">
		        <u-icon name="https://app.zbzedu.com/static/WaChat/icon/liked.png" size="36" class="u-m-r-10"></u-icon>
		        <span :class="{'color-active': info.likeFlag }">{{info.likeNum ? info.likeNum : '点赞'}}</span>
		      </view>
		    </view>
		  </view>
		  <u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	import discussionItem from '../../pages/explore/components/discussionItem.vue'
	import Comment from '../../pages/forum/components/Comment.vue'
	export default {
		components: {
			discussionItem,
			Comment
		},
		data() {
			return {
			};
		},
		methods:{
			toReply(){
				uni.navigateTo({
					url:"/pages/discussion/reply"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.fixed-bottom {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  background: #fff;
		  padding-top: 20rpx;
		  padding-bottom: constant(safe-area-inset-bottom);
		  padding-bottom: env(safe-area-inset-bottom);
		  .input {
		    width: 380rpx;
		    height: 68rpx;
		    line-height: 40rpx;
		    border-radius: 36rpx;
		    background-color: rgba(187, 187, 187, .25);
		    margin-bottom: 20rpx;
		  }
		  .button-row::after {
		    content: "";
		    border: none;
		  }
		}
	}
</style>
